{% extends "base.html" %}

{% block content %}

<div class="info">
  <pre id="status">

  </pre>
</div>

<hr class=sep />

<button command="test" type=button  class=midbutton>TEST</button>
<button command="stop" type=button  class=midbutton>STOP STOP STOP</button>

 <!-- ====================================================================== -->
 <hr/>
 <!-- ====================================================================== -->

{% for a in alarms %}
      <form action="should_not_be_used">
      <div>
      <input name=command value=update type=hidden>
      <input name=no value={{a.no}} type=hidden>

      <input type="number" min=0 max=23 step=1 value={{a.h}} name="h"> :
      <input type="number" min=0 max=59 step=5 value={{a.m}} name="m">

      Mo<input type=checkbox name=day0 value=on {{a.day0}}>
      Tu<input type=checkbox name=day1 value=on {{a.day1}}>
      We<input type=checkbox name=day2 value=on {{a.day2}}>
      Th<input type=checkbox name=day3 value=on {{a.day3}}>
      Fr<input type=checkbox name=day4 value=on {{a.day4}}>
      Sa<input type=checkbox name=day5 value=on {{a.day5}}>
      Su<input type=checkbox name=day6 value=on {{a.day6}}>

      <!-- <button type=submit>Update</button> -->
      <input type='submit'/>
      </div>
      </form>
{% end %}


<script>
$(function() {
    console.log("alarm setup");

    function SendCommand(command) {
        if (!command) command = "refresh";

        console.log("sending command: " + command);
        $.get("/alarm_command", {command: command}, SetStatus);
    }

    function SetStatus(data, html_status) {
        console.log("command completed [" + status + "]");
        //console.log("command completed [" + data + "]");
        $("#status").html(data);

    }

    function ButtonClick() {
        var command = $(this).attr("command");
        SendCommand(command);
    }

    function FormSubmit() {
        var f = $(this);
        var args = f.serialize();
        console.log("form args: " + args);
        $.get("/alarm_command?" + args, SetStatus);
        // prevent the browser from actuall issuing an html request
        return false;
    }

    // force immediate status update
    SendCommand();
    // force subsequent updates every 30 secs
    setInterval(SendCommand, 30 * 1000);

    $("button").click(ButtonClick);
    $("form").submit(FormSubmit);
 });

 </script>

{% end %}
